<template>
  <div class="message">
    <el-form ref="form" :model="form" label-width="80px" class="main">
      <el-form-item label="地址名称">
        <el-select v-model="form.region" placeholder="地址名称">
          <el-option
            v-for="(item, index) in addressData"
            :v-model="form.region"
            :key="index"
            :label="item.addressname"
            :value="item.addressid"
          ></el-option>
        </el-select>
        <el-button type="primary" @click="onSubmit" style="margin-left: 10px"
          >搜索</el-button
        >
        <el-button @click="clear">重置</el-button>
      </el-form-item>
      <el-table :data="tableData" style="width: 60%">
        <el-table-column type="index" width="120"> </el-table-column>
        <el-table-column prop="jrname" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="jrtel" label="电话号" width="150">
        </el-table-column>
        <el-table-column prop="jrid" label="等级ID" width="120">
        </el-table-column>
        <el-table-column prop="levelname" label="等级名称" width="120">
        </el-table-column>
        <el-table-column prop="addressname" label="地址名称" width="120">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>

<script>
import {
  getMessage,
  deleteMessage,
  getMessageByAddrId,
} from "../../api/message.js";
import { levelList } from "../../api/level.js";
import { getAddress } from "../../api/address.js";
export default {
  data() {
    return {
      form: {
        name: "",
        region: "",
      },
      tableData: [],
      levelDate: [],
      addressData: [],
    };
  },
  created() {
    this.init();
    this.level();
    this.address();
  },
  methods: {
    init() {
      Promise.all([this.getAddress1(), this.getMessage1(), this.levelList1()])
        .then(() => {
          //这个放在里面
          this.level();
          this.address();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //还可以有 async await (try catch)
    //不能少了return
    getAddress1() {
      return getAddress()
        .then((res) => {
          this.addressData = res.data.records;
          console.log(this.addressData, "address");
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getMessage1() {
      return getMessage()
        .then((res) => {
          this.tableData = res.data.records;
          // console.log(this.tableData, "table");
        })
        .catch((err) => {
          console.log(err);
        });
    },
    levelList1() {
      return levelList()
        .then((res) => {
          this.levelDate = res.data.records;
          // console.log(this.levelDate, "levelDate");
        })
        .catch((err) => {
          console.log(err);
        });
    },
    level() {
      // console.log(this.tableData, "table");
      for (var i = 0; i < this.tableData.length; i++) {
        for (var j = 0; j < this.levelDate.length; j++) {
          if (this.tableData[i].jrlevel == this.levelDate[j].jrid) {
            this.tableData[i].levelname = this.levelDate[j].levelname;
          }
        }
      }
    },
    address() {
      for (var i = 0; i < this.tableData.length; i++) {
        for (var j = 0; j < this.addressData.length; j++) {
          if (
            this.tableData[i].jraddressesid == this.addressData[j].addressid
          ) {
            this.tableData[i].addressname = this.addressData[j].addressname;
            console.log(12);

            console.log(this.addressData[j].addressname, "23121");
          }
        }
      }
    },
    onSubmit() {
      if (this.form.region) {
        console.log(this.form.region, "region");
        //通过addressId获取地址名称
        getMessageByAddrId({
          jraddressesid: this.form.region,
        })
          .then((res) => {
            this.tableData = res.data;
            this.level();
            this.address();
            // console.log(res, "res");
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        alert("输入地址名称！");
      }
    },

    handleEdit(row) {
      console.log(row, "row111111111");
      this.$router.push({
        path: "/message/addMessage",
        query: {
          ids: row.jrid,
        },
      });
    },
    handleDelete(row) {
      //删除信息
      deleteMessage([row.jrid])
        .then((res) => {
          console.log(res);
          this.init();
        })
        .catch((err) => {
          console.log(err);
        });
      console.log(row);
    },
    clear() {
      //重置表单
      console.log(this.form.region);
      this.form.region = "";
      this.tableData = [];
      this.init();
    },
  },
};
</script>

<style scoped>
.main {
  width: 70%;
  margin-top: 200px;
  margin-left: 500px;
}
</style>